<!DOCTYPE html>
<html >
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<title>男生或则女生</title>
		<script src="../../script/mui.min.js"></script>
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../../css/base.css"/>
		<link rel="stylesheet" href="../../css/CFNetPP_Base.css">
		<style type="text/css" media="screen">
			html, body {
				margin: 0px;
				padding: 0px;
				height: 100%;
				/*background-color: white;*/
				/*font-family: "微软雅黑","宋体","Tahoma",Arial;*/
				/*color: #333333;*/
				background-color: rgba(0,0,0,0.2);
				overflow: hidden;
			}
			#pie1 {
				height: 200px;
				width: 150px;
				padding-left: 12px
			}
			#pie2 {
				height: 200px;
				width: 150px;
				padding-left: 12px
			}
			.bar_pie {
				/*width: 50%;*/
			}
			.pie {
				padding: 0 15px
			}
			.boyOrGirl {
				padding: 10px
			}
			.boyOrGirl td {
				padding: 10px
			}
			.pie1 {
				margin: 0 12px;
				color: #F0F0F0
			}
			.bg-div {
				width: 100%;
				height: 100%;
				background-color: #F0F0F0
			}
		</style>
	</head>
	<body>
		<div class="boyOrGirl show" id="boyOrGirl"  onclick="bottomDivClick()">
			<table>
				<tr>
					<td class="bar_pie"><div class="pie" id="pie1"></div></td>
					<td class="bar_pie"><div class="pie" id="pie2"></div></td>
				</tr>
				<tr>
					<td class="bar_pie"><div class="pie1" id="pie3"></div></td>
					<td class="bar_pie"><div class="pie1" id="pie4"></div></td>
				</tr>
			</table>
		</div>
		<div id="mask" class="bg-div"  ></div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script src="../../script/jquery.min.js" type="text/javascript"></script>
	<script src="../../script/timecontrol.min.js"></script>
	<script type="text/javascript" src="../../script/MD5.js"></script>
	<script src="../../script/swiper-3.4.2.jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="../../script/requestTool.js"></script>
	<script type="text/javascript" src="../../script/echarts.min.js"></script>
	<script src="../../script/common.js"></script>
	<script>
		var z_num = 0;
		var s_num = 0;
		var no_num = 0;
		var yes_num = 0;
		apiready = function() {
			//	document.body.addEventListener('touchmove', function (event) {
			////	alert('111');
			//  event.preventDefault();
			//}, false);
			setupBgClick();
			//			api.addEventListener({
			//				name : 'item_pie'
			//			}, function(ret, err) {
			//				if (ret) {
			//					z_num = ret.value.z_num;
			//					s_num = ret.value.s_num;
			//					no_num = ret.value.no_num;
			//					yes_num = ret.value.yes_num;
			//				}
			//			})
			z_num = api.pageParam.z_num;
			s_num = api.pageParam.s_num;
			no_num = api.pageParam.no_num;
			yes_num = api.pageParam.yes_num;
			var str = '参与人数为' + s_num + '人';
			var str2 = '审阅人数为' + yes_num + '人';
			$('#pie3').html(str);
			$('#pie4').html(str2);
			//		alert(z_num+'vs'+s_num);
			setupChart(z_num, s_num);
			setupChart2(no_num, yes_num);
		}
		function hideFrame() {
			api.closeFrame({
				name : 'Teacher_TestMarkingManage_PieChart'
			});
		}

		function bottomDivClick() {
			event.stopPropagation();
		}

		function closeFrame() {
			api.setFrameAttr({
				name : 'Teacher_TestMarkingManage_PieChart',
				hidden : true
			});
		}

		function setupBgClick() {
			$('.bg-div').click(function() {
				closeFrame();
			});
		}

		function setupChart(z_num, s_num) {
			var myChart = echarts.init(document.getElementById('pie1'));
			var option1 = {
				title : {
					text : '参与率',
					x : 'center'
				},
				tooltip : {
					trigger : 'item',
					formatter : "{a} <br/>{b} : {c}人 ({d}%)",
					position : ['50%', '50%']
				},
				legend : {
					orient : 'vertical',
					bottom : '50%',
					data : ['直接访问']
				},
				series : [{
					name : '人数',
					type : 'pie',
					radius : ['50%', '70%'],
					avoidLabelOverlap : false,
					startAngle : '82',
					label : {
						normal : {
							show : false,
							position : 'center'
						},
						emphasis : {
							show : true,
							textStyle : {
								fontSize : '20',
								fontWeight : 'bold'
							}
						}
					},
					labelLine : {
						normal : {
							show : false
						}
					},
					data : [{
						value : z_num - s_num,
						name : '未参与',
						itemStyle : {
							normal : {
								color : '#FFFFFF'
							}
						}
					}, {
						value : s_num,
						name : '已参与',
						itemStyle : {
							normal : {
								color : '#18B4ED'
							}
						}
					}],
				}]
			};
			var option = option1;
			myChart.setOption(option);
		}

		function setupChart2(no_num, yes_num) {
			//			var y_num = z_num - qnum;
			var str = '已阅人数为' + yes_num + '人';
			var myChart = echarts.init(document.getElementById('pie2'));
			var option1 = {
				title : {
					text : '审阅率',
					x : 'center'
				},
				tooltip : {
					trigger : 'item',
					formatter : "{a} <br/>{b} : {c}人 ({d}%)",
					confine : true,
					position : ['20%', '50%']
				},
				series : [{
					name : '人数',
					type : 'pie',
					radius : ['50%', '70%'],
					avoidLabelOverlap : false,
					label : {
						normal : {
							show : false,
							position : 'center'
						},
						emphasis : {
							show : true,
							textStyle : {
								fontSize : '20',
								fontWeight : 'bold'
							}
						}
					},
					labelLine : {
						normal : {
							show : false,
							name : '33.3%',
						}
					},
					data : [{
						value : no_num,
						name : '未阅',
						itemStyle : {
							normal : {
								color : '#FFFFFF'
							}
						}
					}, {
						value : yes_num,
						name : '已阅',
						itemStyle : {
							normal : {
								color : '#18B4ED'
							}
						}
					}],
				}]
			};
			var option = option1;
			myChart.setOption(option);
		}
	</script>
</html>